<template>
  <el-card>
    <div class="PersonHeader">
      <el-button type="success" style="margin-left: 15px" @click="EstablishingFamily">组建家庭</el-button>
      <el-button type="success" @click="this.DialogAddPersonRecord = true">新增成员</el-button>
      <el-button type="primary" @click="exportToExcel()">导出Excel</el-button>
      <el-button type="primary" @click="addDisease()">疾病记录</el-button>
      <el-button type="primary" @click="openFacialCapture()">人像采集</el-button>
    </div>
    <div class="select">
      <el-form :model="form" ref="form">
        <el-input placeholder="输入姓名" v-model="form.name" class="input"></el-input>
        <el-input placeholder="输入身份证号" v-model="form.idcard" class="input"></el-input>
        <el-button type="success" @click="SelectPerson" class="button">查询</el-button>
      </el-form>
    </div>
    <div class="content">
      <el-table :data="PersonalRecords.slice(
        (currentPage - 1) * pageSize,
        currentPage * pageSize
      )
        " border style="width: 100%" height="61vh" :header-cell-style="{ 'text-align': 'center', 'font-size': '14px' }"
        :cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="photo" label="照片">
          <template #default="props">
            <el-image :src="props.row.photo" class="photoImg" alt="暂无照片" :preview-src-list="[props.row.photo]" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="sex" label="性别">
          <template #default="props">
            {{ props.row.sex == 0 ? "女" : "男" }}
          </template>
        </el-table-column>
        <el-table-column prop="signing" label="是否签约" :filters="[
          { text: '未签约', value: 0 },
          { text: '已签约', value: 1 },
        ]" :filter-method="filterSigning" filter-placement="right">
          <template #default="props">
            <el-tag :type="props.row.signing === '0' ? 'info' : 'success'">
              {{ props.row.signing == 0 ? "未签约" : "已签约" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="poverty" label="贫困家庭" :filters="[
          { text: '　否　', value: 0 },
          { text: '贫困户', value: 1 },
        ]" :filter-method="filterPoverty" filter-placement="right">
          <template #default="props">
            <el-tag :type="props.row.poverty === '0' ? '' : 'info'">
              {{ props.row.poverty == 0 ? "　否　" : "贫困户" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="checkup" label="体检" :filters="[
          { text: '未体检', value: 0 },
          { text: '已体检', value: 1 },
        ]" :filter-method="filterCheckup" filter-placement="right">
          <template #default="props">
            <el-tag :type="props.row.checkup === '0' ? 'warning' : 'success'" style="cursor: pointer"
              @click="GotoHealthyCheck(props.row.healthrecord)">
              {{ props.row.checkup == 0 ? " 未体检" : "已体检" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="openrecord" label="健康档案" :filters="[
          { text: '未开放', value: 0 },
          { text: '已开放', value: 1 },
        ]" :filter-method="filterOpenReccord" filter-placement="right">
          <template #default="props">
            <el-tag :type="props.row.openrecord === '0' ? 'warning' : 'success'">
              {{ props.row.openrecord == 0 ? "未开放" : "已开放" }}</el-tag>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="volk" label="民族" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="address" label="住址" show-overflow-tooltip /> -->
        <el-table-column prop="village" label="村(居)委会" show-overflow-tooltip width="100" />
        <el-table-column prop="healthrecord" label="健康档案号" width="140" show-overflow-tooltip />
        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-button size="small" link type="primary" @click="RecordDetails(scope.row.idcard)">详情</el-button>
            <el-button size="small" link type="primary" @click="RecordEdit(scope.row.rid)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination v-model:current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next"
          background :total="PersonalRecords.length" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 添加成员 -->
    <el-dialog v-model="DialogAddPersonRecord" title="新增成员档案" style="width: 450px">
      <el-form :model="newperson" ref="newperson" :rules="rules" class="DialogAddPersonRecord">
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="newperson.name" />
        </el-form-item>
        <el-form-item label="性别：" prop="age">
          <el-select v-model="newperson.sex" placeholder="请选择性别">
            <el-option label="男" value="1" />
            <el-option label="女" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
          <el-input v-model="newperson.age" />
        </el-form-item>
        <el-form-item label="民族：" prop="volk">
          <el-input v-model="newperson.volk" />
        </el-form-item>
        <el-form-item label="婚姻状态：">
          <el-select v-model="newperson.maritalrelation" placeholder="请选择婚姻状态">
            <el-option label="未婚" value="未婚" />
            <el-option label="已婚" value="已婚" />
            <el-option label="离异" value="离异" />
            <el-option label="丧偶" value="丧偶" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话：" prop="telephone">
          <el-input v-model="newperson.telephone" />
        </el-form-item>
        <el-form-item label="身份证号：" prop="idcard">
          <el-input v-model="newperson.idcard" />
        </el-form-item>
        <el-form-item label="村(居)委会：" prop="village">
          <el-select v-model="newperson.village" placeholder="请选择村(居)委会">
            <el-option label="大王村" value="大王村" />
            <el-option label="西北龙村" value="西北龙村" />
          </el-select>
        </el-form-item>
        <el-form-item label="住址：" prop="address">
          <el-input v-model="newperson.address" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="DialogAddPersonRecord = false">关闭</el-button>
          <el-button type="primary" @click="AddPersonRecord"> 添加 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑成员信息 -->
    <el-dialog v-model="DialogEditPersonRecord" title="编辑成员档案" style="width: 450px">
      <el-form :model="EPersonalRecords" ref="newperson" :rules="rules" class="DialogAddPersonRecord">
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="EPersonalRecords.name" disabled />
        </el-form-item>
        <el-form-item label="家庭医生签约：">
          <el-select v-model="EPersonalRecords.signing" placeholder="请选择是否签约">
            <el-option label="已签约" value="1" />
            <el-option label="未签约" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="贫困家庭：">
          <el-select v-model="EPersonalRecords.poverty" placeholder="请选择是否贫困家庭">
            <el-option label="贫困户" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="体检：">
          <el-radio-group v-model="EPersonalRecords.checkup">
            <el-radio label="1" size="small" border>已体检</el-radio>
            <el-radio label="0" size="small" border>未体检</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="婚姻状态：">
          <el-select v-model="EPersonalRecords.maritalrelation" placeholder="请选择婚姻状态">
            <el-option label="未婚" value="未婚" />
            <el-option label="已婚" value="已婚" />
            <el-option label="离异" value="离异" />
            <el-option label="丧偶" value="丧偶" />
          </el-select>
        </el-form-item>

        <el-form-item label="联系电话：" prop="telephone">
          <el-input v-model="EPersonalRecords.telephone" />
        </el-form-item>
        <el-form-item label="健康档案：">
          <el-select v-model="EPersonalRecords.openrecord" placeholder="请选择是否开放">
            <el-option label="已开放" value="1" />
            <el-option label="未开放" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="村(居)委会：">
          <el-select v-model="EPersonalRecords.village" placeholder="请选择村(居)委会">
            <el-option label="大王村" value="大王村" />
            <el-option label="西北龙村" value="西北龙村" />
          </el-select>
        </el-form-item>
        <el-form-item label="住址：" prop="address">
          <el-input v-model="EPersonalRecords.address" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="DialogEditPersonRecord = false">关闭</el-button>
          <el-button type="primary" @click="SavePersonRecord()">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 疾病记录 -->
    <el-dialog v-model="DialogHomeVisit" title="疾病记录表" close-on-press-escape :close-on-click-modal="false" width="480"
      custom-class="Mydialog">
      <el-form :model="submitParams" :rules="rules" ref="submitParamsForm" class="Form">
        <el-form-item label="姓名：" prop="name">
          <el-input type="text" v-model="submitParams.name" class="Form_item" />
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-radio-group v-model="submitParams.sex" class="Form_item">
            <el-radio :label="1" style="margin-left: 40px">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="住址：" prop="address">
          <el-input type="text" v-model="submitParams.address" class="Form_item" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard">
          <el-input type="text" v-model="submitParams.idcard" class="Form_item" />
        </el-form-item>
        <el-form-item label="疾病信息：" prop="disease">
          <el-input type="text" v-model="submitParams.disease" class="Form_item" />
        </el-form-item>
        <el-form-item label="本次家访状况：" prop="lastResult">
          <el-select v-model="submitParams.lastResult" placeholder="请选择家访状况" class="Form_item">
            <el-option label="良好" value="良好" />
            <el-option label="尚可" value="尚可" />
            <el-option label="注意" value="注意" />
            <el-option label="高危" value="高危" />
          </el-select>
        </el-form-item>
        <el-form-item label="本次家访结果：" prop="result">
          <el-input type="textarea" v-model="submitParams.result" :autosize="{ minRows: 2, maxRows: 4 }"
            class="Form_item" />
        </el-form-item>
        <el-form-item label="下次家访时间：" prop="nextTime">
          <el-date-picker v-model="submitParams.nextTime" type="datetime" placeholder="请选择下次家访时间"
            format="YYYY-MM-DD hh:mm:ss" value-format="x" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog()">关闭</el-button>
          <el-button type="primary" @click="saveHomeForm()"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 人像采集 -->
    <el-dialog title="人像采集" v-model="DialogFacialCapture" width="500px">
      <el-form :model="Record" class="Record" :rules="rules" ref="Record">
        <el-form-item label="居民照片：" prop="fileList" :label-width="formLabelWidth">
          <div class="upload">
            <el-upload :file-list="fileList" ref="uploadComp" :auto-upload="false" :data="Record"
              list-type="picture-card" limit="1" @change="handleFileChange">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="身份证号：" prop="idcard">
          <el-input type="text" v-model="Record.idcard" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog()">关闭</el-button>
          <el-button type="primary" @click="saveFacialPhoto()">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script>
import { ref } from "vue";
import * as XLSX from "xlsx";
import { recordList, recordAdd, recordEdit } from "@/api/record.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { pageMixin } from "@/mixins/pageMixin";
import { recordMixin } from "@/mixins/recordMixin";
export default {
  name: "PersonRecord",
  mixins: [pageMixin, recordMixin],
  data() {
    return {
      search: ref(""),
      DialogEditPersonRecord: false,
      PersonalRecords: [],
      EPersonalRecords: [],
      EPRtoUpdate: {},
    };
  },
  created() {
    this.fetchRecord();
  },
  methods: {
    /**
     * 一般方法
     */
    exportToExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.PersonalRecords);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      XLSX.writeFile(workbook, "个人档案信息.xlsx");
    },
    RecordDetails(idcard) {
      this.$router.push(`/record/personal/details?idcard=${idcard}`);
    },
    RecordEdit(rid) {
      this.DialogEditPersonRecord = true;
      // console.log(rid);
      for (var i = 0; i < this.PersonalRecords.length; i++) {
        if (rid == this.PersonalRecords[i].rid) {
          this.EPersonalRecords = JSON.parse(JSON.stringify(this.PersonalRecords[i]));
          break;
        }
      }
      // console.log(this.EPersonalRecords);
    },
    SavePersonRecord() {
      this.EPRtoUpdate = this.EPersonalRecords;
      this.EPRtoUpdate.photo = "";
      ElMessageBox.confirm(
        "确认修改" + this.EPRtoUpdate.name + "的档案?",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "关闭",
          type: "warning",
        }
      )
        .then(() => {
          ElMessage({
            type: "success",
            message: "修改成功",
          });
          this.DialogEditPersonRecord = false;
          return recordEdit(this.EPRtoUpdate);
        })
        .then(() => {
          this.fetchRecord();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消成功",
          });
        });
    },
    /**
     * 标签过滤器
     */
    filterSigning(value, row) {
      console.log(row.name + "..." + row.signing + "..." + value.toString());
      return row.signing === value.toString();
    },
    filterPoverty(value, row) {
      return row.poverty === value.toString();
    },
    filterCheckup(value, row) {
      return row.checkup === value.toString();
    },
    filterOpenReccord(value, row) {
      return row.openrecord === value.toString();
    },
    GotoHealthyCheck(params) {
      this.$router.push(`/health/check?param=${params}`);
    },
  },
};
</script>
<style>
::v-deep .hide .el-upload--picture-card {
  display: none !important;
}

.el-table__cell {
  position: static !important;
}
</style>
<style>
.Form .el-form-item__label {
  width: 150px;
}
</style>
<style scoped>
::v-deep .Record .el-form-item__label {
  width: 175px;
}

::v-deep .DialogAddPersonRecord .el-form-item__label {
  width: 125px;
}

.DialogAddPersonRecord .el-input {
  width: 199px;
}

.photoImg {
  width: 35px;
  height: 35px;
}

.upload {
  width: 148px;
  height: 148px;
  overflow: hidden;
}

.Record .el-input {
  width: 170px;
}

.box {
  height: auto;
  width: 100%;
}

.PersonHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.PersonHeader,
.select {
  width: 1920px;
  height: 40px;
}

.input {
  margin-top: 4px;
  margin-left: 10px;
  margin-right: 15px;
  width: 200px;
}

.select {
  margin-top: 5px;
  border: 1px solid black;
}

.select span {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 20px;
  align-items: end;
  width: 100%;
  height: 40px;
  background-color: white;
}

::v-deep .Mydialog {
  border-radius: 20px;
}

.Form {
  align-items: center;
}

.Form_item {
  width: 220px;
}
</style>
